<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"
      xmlns:f="http://java.sun.com/jsf/core">
    <ui:composition template="layout.xhtml">
        <ui:define name="body">
            <!--            <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true" />-->

            <br/>
            <!--            <h3 class="title">Mapa</h3>-->

            <h:form id="mapsForm" enctype="multipart/form-data">

                <!--                <h4 class="title">Inscrição Cadastral</h4>-->
                <p:panel rendered="false" id="realtyPanel" style="background: none; border: none;" 
                         styleClass="container_24 clearfix ">

                    <p:outputLabel value="D:" styleClass="grid_2" for="dInputText" />
                    <p:inputText id="dInputText" styleClass="grid_2"
                                 value="#{managerMapa.imovel.inscricaoCadastralD}" />

                    <p:outputLabel value="S:" styleClass="grid_2" for="sInputText" />
                    <p:inputText id="sInputText" styleClass="grid_2"
                                 value="#{managerMapa.imovel.inscricaoCadastralS}" />

                    <p:outputLabel value="Quadra:" styleClass="grid_2" for="qInputText" />
                    <p:inputText id="qInputText" styleClass="grid_2"
                                 value="#{managerMapa.imovel.inscricaoCadastralQuadra}" />

                    <p:outputLabel value="Lote:" styleClass="grid_2" for="lInputText" />
                    <p:inputText id="lInputText" styleClass="grid_2"
                                 value="#{managerMapa.imovel.inscricaoCadastralLote}" />

                    <p:outputLabel value="Unid:" styleClass="grid_2" for="uInputText" />
                    <p:inputText id="uInputText" styleClass="grid_2"
                                 value="#{managerMapa.imovel.inscricaoCadastralUnid}" />

                </p:panel>
                <div class="buttonAction">
                    <p:commandButton value="Visualizar" rendered="false"
                                     actionListener="#{managerMapa.search()}" update="@form" process="@form" />
                </div>

                <center>
                    <p:gmap center="#{managerMapa.centro}" zoom="14" type="HYBRID"   
                            style="width:880px;height:450px" rendered="false"
                            model="#{managerMapa.mapModel}" >   

                        <p:ajax event="overlaySelect" listener="#{managerMapa.onMarkerSelect}" />

                        <p:gmapInfoWindow >  
                            <p:outputPanel style="text-align:center;display:block;margin:auto:">  
                                <h:outputText value="Proprietário(s): " />
                                <h:outputText value="#{managerMapa.marker.title}" /> 
                                <br/>
                                <h:outputText value="Inscrição Cadastral: " />
                                <h:outputText value="#{managerMapa.marker.data.inscricaoCadastralD}." /> 
                                <h:outputText value="#{managerMapa.marker.data.inscricaoCadastralS}." /> 
                                <h:outputText value="#{managerMapa.marker.data.inscricaoCadastralQuadra}." /> 
                                <h:outputText value="#{managerMapa.marker.data.inscricaoCadastralLote}." /> 
                                <h:outputText value="#{managerMapa.marker.data.inscricaoCadastralUnid}" />

                                <br/>
                                <h:outputText value="Endereço:" />
                                <h:outputText value="#{managerMapa.marker.data.enderecoImovel.logradouro}, " />
                                <h:outputText value="Nº #{managerMapa.marker.data.enderecoImovel.numero}," 
                                              rendered="#{managerMapa.marker.data.enderecoImovel.numero ne null}"/>
                                <h:outputText value="#{managerMapa.marker.data.enderecoImovel.bairro}." />



                            </p:outputPanel>  
                            <div class="buttonAction">
                                <p:button value="Visualizar Imóvel"  outcome="visualizarimovel"
                                          styleClass="ui-priority-primary" onclick="this.form.target='_blank'">
                                    <f:param name="vImovel" value="#{managerMapa.marker.data.id}" />
                                </p:button>
                            </div>
                        </p:gmapInfoWindow> 
                    </p:gmap>
                </center>
                <h3 class="title">Atlas Diagnóstico</h3>
                <h4>Quantidade de Casas Registradas: #{managerMapa.qtdImovel()}</h4>
                <h4>Quantidade de Casas Pendentes: <a href="pendencia.xhtml?p=true">#{managerMapa.qtdImovelPendente()}</a></h4>


                <p:pieChart  value="#{managerMapa.pieModel}" legendPosition="w"  
                             showDataLabels="true"  legendCols="3"  dataFormat="value"
                             title="Quantidade de Imóveis por Bairro" style="height:350px;" />

                <div class="container_24 clearfix">
                    <p:pieChart title="Situação dos Imóveis" value="#{managerMapa.pieModelPendente}" legendPosition="w"  
                                showDataLabels="true" style="width: 450px" dataFormat="value" styleClass="grid_14"/>

                    <p:barChart  value="#{managerMapa.categoryModel}" legendPosition="ne"  styleClass="grid_8"
                                 title="Patrimônio" min="0" max="#{managerMapa.max}" style="width: 450px;"/>  
                </div>
            </h:form>
        </ui:define>
    </ui:composition>
</html>

